<script lang="ts">
import Vue from 'vue'
import tips from "@/utils/tips";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {getStoresOrders, getWithdrawalsData, getWithdrawalsObj} from "@/services/store/store";
import {getPrice} from "@/utils/utils";
import {IncomeObj, OrderItem, WithdrawalItem} from "@/types/store/income";

export default Vue.extend({
  name: "Income",
  components: {NavBar},
  data() {
    return {
      currentTabs: 0,
      incomeObj: {} as IncomeObj,
      ordersList: [] as OrderItem[],
      withdrawalsList: [] as WithdrawalItem[],


      // 上拉加载
      loading: false,   // 加载状态
      hasMore: true,
      current: 1,   // 当前页码
      pageSize: 10, // 当前页面每页数量
      scrollTop: 0,
      old: {
        scrollTop: 0
      }
    }
  },
  computed: {
    lang() {
      return this.$t('storePages.income')
    },
  },
  onLoad(query?: AnyObject) {
    this.getStoreIncomeObj()
    this.getStoreOrders()
  },
  methods: {
    getPrice,
    // 获取商家金额
    async getStoreIncomeObj() {
      const {code, msg, data} = await getWithdrawalsObj();
      if (code === 200) {
        this.incomeObj = data
      } else {
        tips.toast(msg)
      }
    },

    // 获取商家金额order列表
    async getStoreOrders() {
      this.loading = true;
      const {pageSize, current} = this
      try {
        const {code, data: {data, meta}} = await getStoresOrders(current, pageSize);
        console.log("getStoresOrders -=-=", code, data)
        console.log('data', data)
        if (code === 200) {
          this.ordersList = [...this.ordersList, ...data]
          const {current_page, last_page, next_page} = meta
          this.current = next_page;

          // 更新是否还有更多数据的标志
          if (current_page >= last_page) {
            this.hasMore = false;
          }
        }
      } catch (error) {
        console.error('加载订单失败:', error);
      } finally {
        this.loading = false;
      }
    },
    // 监听滚动
    scroll: function (e: any) {
      this.old.scrollTop = e.detail.scrollTop
    },
    // scroll 触发
    loadMore() {
      if (!this.loading && this.hasMore) {
        this.getStoreOrders();
      }
    },
    // tabs 切换
    onTabs(current: any) {
      this.currentTabs = current.index
      console.log(this.currentTabs)
      if (this.currentTabs === 1) {
        this.getWithdrawalsList()
      }
    },
    // 获取提现记录
    async getWithdrawalsList() {
      uni.showLoading({title: '加载中', icon: 'none'})
      try {
        const resData = await getWithdrawalsData()
        if (resData.code === 200) {
          this.withdrawalsList = resData.data
        }
        uni.hideLoading()
      } catch (error) {
        console.error('加载订单失败:', error);
      }
    },
  }
})
</script>
<template>
  <view>
    <nav-bar :page-title="lang.pageName" navbar-color="#fff"/>
    <view :class="[locale]">
      <!--  头部-->
      <view class="column gap-40 padding-28-40 payouts-card-box">
        <view class="flex-between">
          <view class="column-center gap-20">
            <view class="default-text">{{ lang.availableAmount }}</view>
            <view class="text-36">{{ getPrice(incomeObj.amount) }}</view>
          </view>
          <!--  立即提现-->
          <navigator :url="`/pages/IncomePayouts/IncomePayouts?money=${incomeObj.amount}&type=store`"
                     hover-class="hover">
            <view class="text-28 payouts" hover-class="hover">{{ lang.withdrawNow }}</view>
          </navigator>
        </view>

        <view class="flex-between text-28">
          <view class="column-center gap-8">
            <view>{{ lang.pendingAmount }}</view>
            <view>{{ getPrice(incomeObj.pending_price) }}</view>
          </view>

          <view class="column-center gap-8">
            <view>{{ lang.withdrawnAmount }}</view>
            <view>{{ getPrice(incomeObj.withdrawals_amount) }}</view>
          </view>

          <view class="column-center gap-8">
            <view>{{ lang.totalIncome }}</view>
            <view>{{ getPrice(incomeObj.total_amount) }}</view>
          </view>
        </view>
      </view>

      <u-tabs :scrollable="false" :lineWidth="26" :activeStyle="{ color: '#0186FF' }"
              :list="[{name:lang.tabs['incomeRecord']}, {name:lang.tabs['withdrawalRecord']}]" @click="onTabs"/>

      <scroll-view scroll-y style="height: 67vh" @scrolltolower="loadMore" :scroll-top="scrollTop" @scroll="scroll">
        <!--    订单记录-->
        <template v-if="currentTabs === 0">
          <view v-for="(item, index) in ordersList" :key="index">
            <view class="column text-28 gap-8 padding-20 bg-white">
              <view>{{ lang.orderInfo['orderNumber'] + item.order_number }}</view>
              <view class="flex-row gap-8">
                <view>
                  <image class="radio-20" style="width: 100rpx; height: 100rpx;" :src="item.user.avatarUrl"/>
                </view>

                <view class="flex-between" style="width: 100%">
                  <view class="column-between gap-8">
                    <view>{{ item.user.nickname }}</view>
                    <view>{{ item.created_at }}</view>
                  </view>

                  <view :class="['column-between gap-8',locale === 'ug-CN' ? 'text-left' : 'text-right']">
                    <view>{{ lang.orderInfo['totalAmount'] + getPrice(item.total_amount) }}</view>
                    <view class="text-26">{{ lang.orderInfo['serviceCharge'] + getPrice(item.service_price) }}</view>
                  </view>
                </view>
              </view>
              <view style="width: 100%; height: 2rpx; background: #D4D4D4"/>
            </view>
          </view>

          <!-- 底部提示-->
          <view class="margin-top-40 color-grey text-32 safe-area-padding" style="width: 100%;">
            <view v-if="loading" class="center gap-20">
              <u-loading-icon/>
              <view>{{ otherLang.loading }}</view>
            </view>
            <view v-if="!loading && !hasMore" class="flex-between">
              <view class="line-weight-30"/>
              <view>{{ otherLang.no_more }}</view>
              <view class="line-weight-30"/>
            </view>
          </view>
        </template>

        <!--    提现记录-->
        <view v-if="currentTabs === 1" v-for="(item, index) in withdrawalsList" :key="index">
          <view class="column">
            <view class="flex-between text-28 padding-20 bg-white">
              <view class="column-center gap-20">
                <view>{{ lang.withdrawalStatus['state'] }}</view>
                <view class="color-blue text-40">￥{{ getPrice(item.amount) }}</view>
              </view>
              <view class="column gap-20" style="align-items: flex-end;">
                <view :class="['tab-label', item.status === 1 ? 'color-blue' : '']">
                  {{ lang.withdrawalStatus[item.status === 1 ? 'success' : (item.status === 2 ? 'rejected' : 'processing')]}}
                </view>
                <view>{{ item.created_at }}</view>
              </view>
            </view>
            <view v-if="index !== ordersList.length - 1" class="line"/>
          </view>
        </view>

        <view v-if="(currentTabs === 0 && ordersList.length <= 0) || (currentTabs === 1 && withdrawalsList.length <= 0)"
              class="center" style="height: 60vh;">
          <u-empty
              mode="order"
              :width="240"
              :hidden="240"
              :textSize="22"
              :text="lang.emptyData"
              icon="http://cdn.uviewui.com/uview/empty/order.png"
          />
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.payouts-card-box {
  color: white;
  background-color: $u-primary;

  .payouts {
    color: $u-primary;
    background: white;
    border-radius: 50rpx;
    padding: 13rpx 28rpx 13rpx 26rpx;
  }
}
</style>